<div class="submenu">
    <div class="label-bar-container">
        <label for="fractalSettingsContainer" class="button-label" onclick="toggleFractalSettingsPanel()">Controls</label>
        <div class="fractal-settings-container" id="fractalSettingsContainer">
            <div class="fractal-settings-panel hidden">
                <div class="settingsSlider centered" style="margin-bottom: 10px;">
                    <div style="display: flex; justify-content: space-between;">
                        <label style="white-space: nowrap;">
                            <span id="equation"></span>
                        </label>
                        <div id="julia-constant" style="display: none;">
                            (<span id="julia-x">0.256</span>, <span id="julia-y">0.01</span>)
                        </div>
                        <div class="dropdown-container">
                            <select id="fractal-select" class="model-selector custom-select">
                                <option value="julia">Julia Set</option>
                                <option value="mandelbrot">Mandelbrot</option>
                                <option value="burningShip">Burning Ship</option>
                                <option value="tricorn">Tricorn</option>
                                <option value="buffalo">Buffalo</option>
                                <option value="henon">Henon Map</option>
                                <option value="ikeda">Ikeda Map</option>
                                <!--<option value="inverseMandelbrot">Inverse Brot</option>-->
                            </select>
                        </div>
                    </div>
                    <input id="exponent" type="range" min="1" max="8" value="2">
                </div>
                <div class="settingsSlider centered" style="margin-bottom: 10px;">
                    <div style="display:flex; justify-content: space-between;">
                        <div id="quality_value">Quality</div>
                        <div id="fps">fps:?? (is javascript enabled?)</div>
                    </div>
                    <input id="quality" type="range" min="0" max="100" value="16">
                </div>
                <div class="gridLayout">

                    <div class="settingsSlider">
                        <label for="length">Length: <span id="length_value"></span></label>
                        <input id="length" type="range" min="0" max="100" value="50">
                    </div>

                    <div class="settingsSlider">
                        <label for="renderWidthMultSlider">Width: <span id="renderWidthMultValue"></span></label>
                        <input type="range" id="renderWidthMultSlider" min="0" max="12" step="0.001">
                    </div>

                    <div class="settingsSlider">
                        <label for="maxLinesSlider">Max Lines: <span id="maxLinesValue"></span></label>
                        <input type="range"
                               id="maxLinesSlider"
                               min="0"
                               max="2048"
                               step="1"
                               title="Set the removal limit for number of lines displayed">
                    </div>

                    <div class="settingsSlider">
                        <label for="regenDebtSlider">Speed: <span id="regenDebtValue"></span></label>
                        <input type="range" id="regenDebtSlider" min="0" max="4" step="0.001">
                    </div>
                    <div class="settingsSlider" title="Set the strength of line generation around your mouse.">
                        <label for="flashlightStrength">Strength: <span id="flashlightStrength_value"></span></label>
                        <input id="flashlightStrength" type="range" min="0" max="1" step="0.001">
                    </div>

                    <div class="settingsSlider" title="Set the radius of line generation around your mouse">
                        <label for="flashlightRadius">Radius: <span id="flashlightRadius_value"></span></label>
                        <input type="range" id="flashlightRadius" min="0" max="1" step="0.001">
                    </div>

                </div>
                <!-- Additional fractal settings sliders here -->
            </div>
            <div class="toggle-panel" onclick="toggleFractalSettingsPanel()" style="padding-top: 15px;">
                <div class="bar left-bar"></div>
                <div class="icon-wrapper">
                    <div class="toggle-icon">
                        <!-- Icon SVG -->
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>
                <div class="bar right-bar"></div>
            </div>
        </div>
    </div>
    <br />
    <div class="label-bar-container">
        <label for="colorSettingsContainer" class="button-label" onclick="toggleColorSettingsPanel()">Color</label>
        <div class="color-settings-container" id="colorSettingsContainer">
            <div class="color-settings-panel hidden">
                <div id="colorselection">
                    <div class="color-picker-container">
                        <div class="color-picker-item">
                            <label for="rColor">R</label>
                            <input type="color" id="rColor" name="rColor" value="#FF0000">
                        </div>
                        <div class="color-picker-item">
                            <label for="gColor">G</label>
                            <input type="color" id="gColor" name="gColor" value="#00FF00">
                        </div>
                        <div class="color-picker-item">
                            <label for="bColor">B</label>
                            <input type="color" id="bColor" name="bColor" value="#0000FF">
                        </div>
                        <div class="color-picker-item">
                            <label for="colorPicker">BG</label>
                            <input type="color" id="colorPicker" name="colorPicker" value="#000000" style="background:#222226;">
                        </div>
                    </div>
                    <br />
                    <div id="colorsliders">
                        <input type="range" min="0" max="255" id="rSlider" value="0" style="display: none;">
                        <div class="gridLayout">

                            <div class="settingsSlider">
                                <label for="cSlider">Brightness<span id="c_value"></span></label>
                                <input type="range" min="0" max="255" id="cSlider" value="128">
                            </div>

                            <div class="settingsSlider">
                                <label for="sSlider">Saturation<span id="s_value"></span></label>
                                <input type="range" min="0" max="255" id="sSlider" value="127">
                            </div>

                            <div class="settingsSlider">
                                <label for="outer_opacity">Outer Opacity<span id="outer_opacity_value"></span></label>
                                <input id="outer_opacity" type="range" min="0" max="100" value="100">
                            </div>

                            <div class="settingsSlider">
                                <label for="inner_opacity">Inner Opacity<span id="inner_opacity_value"></span></label>
                                <input id="inner_opacity" type="range" min="0" max="100" value="100">
                            </div>

                            <div class="settingsSlider" id="inversion-settings">
                                <!-- Slider for Inversion -->
                                <label for="inversion-slider">Inversion</label>
                                <input type="range" id="inversion-slider" min="0" max="100" value="0">
                            </div>
                            <div class="settingsSlider" id="hue-rotation-settings">
                                <!-- Slider for Hue Rotation -->
                                <label for="hue-rotation-slider">Hue Rotation</label>
                                <input type="range" id="hue-rotation-slider" min="0" max="360" value="0">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="toggle-panel" onclick="toggleColorSettingsPanel()" style="padding-top: 15px;">
                <div class="bar left-bar"></div>
                <div class="icon-wrapper">
                    <div class="toggle-icon">
                        <!-- Icon SVG -->
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>
                <div class="bar right-bar"></div>
            </div>
        </div>
    </div>
</div>